<template>
	<view>
		<z-nav-bar title="添加问题效果描述"></z-nav-bar>
		<view class="content">
			<view class="flex_sbc">
				<view class="z-font-32 text-w">已选中描述标签</view>
				<view class="z-font-32 uni-red" @click="clearTags">删除</view>
			</view>
			<view class="tag-box flex_fsc uni-mt-24">
				<view v-for="(tag, index) in selTags" :key="index" class="tag">
					<view style="max-width: 560rpx">{{ tag.map((item) => item.dictValue).join('-->') }}</view>
					<image
						:src="setting.oss_pub_domain + '/app-img/icon/close-main-grey.png'"
						@click="selTags.splice(index, 1)"
					></image>
				</view>
			</view>
			<view class="describe-box flex_sbc">
				<view
					v-for="(item, index) in fristList"
					:key="item.dictCode"
					:class="[
						'item  flex_sbc',
						selTags[0] && selTags[0][0].dictCode === item.dictCode ? 'active' : 'unactivated',
						selTags[0] ? 'uni-F5F5F5-bg uni-color-grey' : ''
					]"
					@click="selOneItem(index)"
				>
					<view>{{ item.dictValue }}</view>
					<image
						:src="setting.oss_pub_domain + '/app-img/icon/more-main-grey.png'"
						class="icon-size-32"
					></image>
				</view>
			</view>
		</view>
		<z-no-data v-if="!fristList && !fristList.length"></z-no-data>
		<uni-popup ref="itemBox" type="bottom">
			<view class="popup-box">
				<view class="top flex_sbc">
					<view style="width: 228rpx">
						<view
							v-if="(!selTags.length && popupCount >= 2) || (selTags.length && popupCount >= 3)"
							class="flex_fsc"
							@click="backUp"
						>
							<uni-icons type="back" size="20" color="#333333"></uni-icons>
							<view>返回上一级</view>
						</view>
						<view v-else></view>
					</view>
					<view style="width: 228rpx" class="text-c">选择</view>
					<view style="width: 228rpx; text-align: right">
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon-close-grey.png'"
							class="icon-size"
							@click="itemBox.close()"
						></image>
					</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view v-if="selTags.length || tmpSel.length" class="tag-box flex_fsc">
						<view v-for="(tag, index) in selTags" :key="index" class="tag">
							<view style="max-width: 560rpx">{{ tag.map((item) => item.dictValue).join('-->') }}</view>
							<image
								:src="setting.oss_pub_domain + '/app-img/icon/close-main-grey.png'"
								@click="selTags.splice(index, 1)"
							></image>
						</view>
						<view class="tag">{{ tmpSel.map((item) => item.dictValue).join('-->') }}</view>
					</view>
					<view :class="{ 'uni-mt-24': selTags.length }">
						<text class="text-w z-font-32">{{ popupData.dictValue }}</text>
						<text class="uni-ml-12 z-font-24 color-C4C7CC">
							以下标签为{{ popupData.dictExtF == '1' && popupData.dictExtS == '1' ? '单' : '多' }}选项
						</text>
					</view>
					<view class="color-C4C7CC uni-mt-16">请选择问题对应的下级标签</view>
					<view v-if="popupData.dictExtF == '1'" class="uni-mt-32 flex_sbc flex_wrap">
						<view v-for="tag in popupData.list" :key="tag.dictCode">
							<view v-if="selTags[0] && popupCount === 1">
								<view
									:class="[
										'item',
										selTags[0][1].dictCode === tag.dictCode ? 'active' : 'unactivated uni-F5F5F5-bg'
									]"
									:style="{
										'font-size':
											tag.dictValue.length > 7
												? '20rpx'
												: tag.dictValue.length > 8
												? '16rpx'
												: tag.dictValue.length > 10
												? '12rpx'
												: '24rpx'
									}"
								>
									{{ tag.dictValue }}
								</view>
							</view>
							<view
								v-else-if="popupData.dictExtS == '0'"
								:class="[
									'item',
									multipleList.map((item) => item.dictCode).includes(tag.dictCode)
										? 'active'
										: 'unactivated'
								]"
								@click="handleMultipleClick(tag)"
								:style="{
									'font-size':
										tag.dictValue.length > 7
											? '20rpx'
											: tag.dictValue.length > 8
											? '16rpx'
											: tag.dictValue.length > 10
											? '12rpx'
											: '24rpx',
									color: '#333'
								}"
							>
								{{ tag.dictValue }}
							</view>
							<view
								v-else
								:class="['item', popupSelTag.dictCode === tag.dictCode ? 'active' : 'unactivated']"
								@click="popupSelTag = tag"
								:style="{
									'font-size':
										tag.dictValue.length > 7
											? '20rpx'
											: tag.dictValue.length > 8
											? '16rpx'
											: tag.dictValue.length > 10
											? '12rpx'
											: '24rpx',
									color: '#333'
								}"
							>
								{{ tag.dictValue }}
							</view>
						</view>
						<view class="item"></view>
					</view>
					<view v-else class="uni-mt-32">
						<view
							v-for="(tags, tindex) in popupData.list"
							:key="tags.dictCode"
							:class="{ 'uni-mt-32': tindex }"
						>
							<view class="z-font-30 text-w">{{ tags.dictValue }}</view>
							<view class="flex_sbc flex_wrap">
								<view
									v-for="tag in tags.children"
									:key="tag.dictCode"
									:class="[
										'item',
										multipleList.map((item) => item[1].dictCode).includes(tag.dictCode)
											? 'active'
											: 'unactivated'
									]"
									@click="handleMultipleClick([tags, tag])"
									:style="{
										'font-size':
											tag.dictValue.length > 7
												? '20rpx'
												: tag.dictValue.length > 8
												? '16rpx'
												: tag.dictValue.length > 10
												? '12rpx'
												: '24rpx',
										color: '#333'
									}"
								>
									{{ tag.dictValue }}
								</view>
							</view>
						</view>
						<view class="item"></view>
					</view>
				</scroll-view>
				<bottom-box :buts="popupButs" :fixed="false" :interval="false" @change="confirm"></bottom-box>
			</view>
		</uni-popup>
		<bottom-box :buts="buts" @change="done"></bottom-box>
	</view>
</template>

<script setup>
import { getDescriptionLabelTag } from '@/api/common.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, computed } from 'vue';
const { proxy: that } = getCurrentInstance(),
	eventChannel = that.getOpenerEventChannel();

const fristList = ref([]);

getDescriptionLabelTag().then((res) => {
	fristList.value = res.list;
});

const popupData = ref({}), // 弹窗渲染数据
	selTags = ref([]), // 标签选择列表
	tmpSel = ref([]), // 临时选择路径列表
	popupSelTag = ref({}), // 当前弹窗选择项
	popupCount = ref(0), // 弹窗层数
	multipleList = ref([]); // 多选数组

const tagSelListLocal = uni.getStorageSync('tagSelList');
if (tagSelListLocal && tagSelListLocal.length) selTags.value = tagSelListLocal;
function selOneItem(index) {
	popupCount.value = 0;
	const { dictCode } = fristList.value[index];
	if (selTags.value[0] && selTags.value[0][0].dictCode != dictCode) return that.tools.alert('请选择已选球杆');
	getDescriptionLabelTag({
		parentCode: dictCode
	}).then((res) => {
		const { list } = res;
		tmpSel.value = [fristList.value[index]];
		if (selTags.value[0] && selTags.value[0][1]) {
			tmpSel.value.push(selTags.value[0][1]);
			popupSelTag.value = selTags.value[0][1];
		}
		popupData.value = { ...fristList.value[index], list };
		itemBox.value.open();
	});
	popupCount.value += 1;
}
// 多选数据点击处理
function handleMultipleClick(tmpTags) {
	const index =
		tmpTags.constructor === Array
			? multipleList.value.findIndex((item) => tmpTags[1].dictCode === item[1].dictCode)
			: multipleList.value.findIndex((item) => tmpTags.dictCode === item.dictCode);
	if (index >= 0) multipleList.value.splice(index, 1);
	else multipleList.value.push(tmpTags);
}
// 多选数据处理
function handleMultiple() {
	if (tmpSel.value[tmpSel.value.length - 1].dictExtF == '0' || popupData.value.dictExtS == '0') {
		if (!multipleList.value.length) return that.tools.alert('请选择标签');
		let multipleTmpList = multipleList.value.map((item) => tmpSel.value.concat(item));
		multipleTmpList = repeatCheck(multipleTmpList);
		if (multipleTmpList.length) selTags.value.push(...multipleTmpList);
		itemBox.value.close();
		multipleList.value = [];
		return true;
	}
	return false;
}

function repeatCheck(selTagList) {
	const selTagIdList = selTags.value.map((item) => item.map((el) => el.dictCode).join(','));
	const checkTmpList = selTagList.filter((item) => !selTagIdList.includes(item.map((el) => el.dictCode).join(',')));
	if (!checkTmpList.length && selTagList.length === 1) {
		that.tools.alert('标签已存在请重新选择');
		return false;
	}
	if (checkTmpList.length != selTagList.length) that.tools.alert('您选择的标签有重复项，以为您自动去重。');
	return checkTmpList;
}

function confirm(index) {
	[doneTag, next][index]();
}

function doneTag() {
	if (handleMultiple()) return;
	if (tmpSel.value.concat(popupSelTag.value).length < 2) return that.tools.alert('请选择标签');
	const checkRes = repeatCheck([
		selTags.value.length && popupCount.value == 1 ? tmpSel.value : tmpSel.value.concat(popupSelTag.value)
	]);
	if (!checkRes) return;
	selTags.value.push(popupSelTag.value.dictCode ? tmpSel.value.concat(popupSelTag.value) : tmpSel.value);
	itemBox.value.close();
}

function next() {
	if (handleMultiple()) return;
	const { hasChildren, dictCode, dictExtF, children } = popupSelTag.value;
	if (!dictCode) return that.tools.alert('请选择标签');
	if (!(tmpSel.value.length && selTags.value[0] && selTags.value[0][1] && popupCount.value == 1))
		tmpSel.value.push(popupSelTag.value);
	if (dictExtF == '0') {
		popupData.value = { ...popupSelTag.value, list: children };
		popupSelTag.value = {};
		popupCount.value += 1;
		return;
	}
	if (hasChildren) {
		getDescriptionLabelTag({
			parentCode: dictCode
		}).then((res) => {
			const { list } = res;
			popupData.value = { ...popupSelTag.value, list };
			popupSelTag.value = {};
		});
		popupCount.value += 1;
	} else {
		const checkRes = repeatCheck([tmpSel.value]);
		if (!checkRes) return;
		selTags.value.push(tmpSel.value);
		itemBox.value.close();
	}
}

// 返回上一级
function backUp() {
	tmpSel.value.pop();
	let tmpObj = tmpSel.value[tmpSel.value.length - 1];
	getDescriptionLabelTag({
		parentCode: tmpObj.dictCode
	}).then((res) => {
		const { list } = res;
		popupData.value = { ...tmpObj, list };
		popupSelTag.value = {};
		popupCount.value -= 1;
	});
}

// 弹窗
const itemBox = ref('');
const popupButs = [
	{
		label: '完成标签',
		bgColor: 'uni-color-main-bg',
		width: 300
	},
	{
		label: '下一步',
		bgColor: 'uni-color-main-bg',
		width: 300
	}
];

// 底部按钮
const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function done() {
	eventChannel.emit('getTag', {
		obj: selTags.value,
		code: selTags.value.map((item) => item[item.length - 1].dictCode).join(',')
	});
	uni.navigateBack();
}

function clearTags() {
	selTags.value = [];
	tmpSel.value = [];
	popupSelTag.value = {};
	popupCount.value = 0;
}
</script>

<style lang="scss" scoped>
@import '../add-item/add-item.scss';
</style>
